@custom-media --viewport-medium (width <= 300px);

/* 自定义查找器 */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
    /* 变量 */
    --mainColor: #00bbff;
    --font-size: 1rem;

    /* 集合变量 */
    --danger-theme: {
        /* 色彩函数 color ( [ <color> | <hue> ] <color-adjuster> ) */
        /*
            可用的色彩调节器（<color-adjuster>）有:
                [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
                [red( | green( | blue( | alpha( | a(] '*' <percentage> )
                [hue( | h(] [ '+' | '-' | '*' ]? <angle> ); --- color(hsla(125, 50%, 50%, .4) hue(+25));
                [saturation( | s(] ['+' | '-' | '*']? <percentage> )
                [lightness( | l(] ['+' | '-' | '*']? <percentage> )
                [whiteness( | w(] ['+' | '-' | '*']? <percentage> )
                [blackness( | b(] ['+' | '-' | '*']? <percentage> )
                tint( <percentage> )
                shade( <percentage> )
                blend( <color> <percentage> [rgb | hsl | hwb]? )
                contrast( <percentage>? )
        */
        color: gray(50, 50%); /* 灰度函数 */
        background: color( rgb(255, 0, 0) );
    }
    --info-theme: {
        color: hwb(0, 0%, 20%, .5);
        background: var(--mainColor);
    }
}

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: red;
    color: white;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

::placeholder {
    color: gray;
}

:--heading {
    /* var函数引用变量，二参用作回退值 */
    color: var(--mainColor, #00bbff);
}

.denger {
    padding: 1.5em;
    font-size: calc(var(--font-size) * 2);

    /* 引入集合变量 */
    @apply --danger-theme;
}

/* 嵌套写法 */
table.colortable {
    & td {
        text-align: center;
        & .c {
            text-transform: uppercase;
        }
        &::first-child, &::first-child + td {
            border: 1px solid pink;
        }
    }
    & th {
        text-align: center;
        background: blue;
        color: white;
    }
}

.imgSet {
    width: 200px;
    height: 200px;
    background-image: image-set(
        url(images/fengjing1.jpg) 1x,
        url(images/fengjing2.jpg) 2x
    );
    filter: blur(4px);
}

@media (--viewport-medium) {
    .denger {
        @apply --info-theme;
    }
}